<template>
    <div class="login">
       <Header></Header>
        <div class="content">
            <img src="../../assets/img/logo.png" alt="">
            <h2>智慧管道</h2>
            <form @submit.prevent="login" id="form">
                <div class="form-list">
                    <div class="label">
                        <i class="iconfont iconwodedangxuan"></i>
                    </div>
                    <input type="text" name="userId" placeholder="请输入账号" v-model="username">
                </div>
                <div class="form-list">
                    <div class="label">
                        <i class="iconfont iconmima"></i>
                    </div>
                    <input type="password" name="passWord" placeholder="请输入密码" v-model="password">
                </div>
                <button>登录</button>
                <div class="bottom">
                    <div class="jz-pw">
                        <x-switch title="记住密码" v-model="remember_pw"></x-switch>
                    </div>
                </div>
            </form>
        </div>

    </div>
</template>

<script>
    import { XSwitch } from 'vux'
    import $ from 'jquery';
    import md5 from 'js-md5';
    export default {
        name: "login",
        components:{XSwitch},
        data(){
            return{
                remember_pw:false,
                username:"",
                password:""
            }
        },
        created(){
            this.remember_pw = localStorage.getItem('remember_pw') == 'true' ? true :false;
            this.username = localStorage.getItem('username')  == "null" ? "" : localStorage.getItem('username');
            this.password = localStorage.getItem('password') == "null" ? "" : localStorage.getItem('password');
        },
        mounted(){

        },
        methods:{
            login(){
                let params={}
                let data = $('#form').serializeArray();
                $.each(data, function() {
                    params[this.name] = this.value;
                });
                if(!params.userId){
                    this.$toast('账户不能为空');
                    return
                }
                if(!params.passWord){
                    this.$toast('密码不能为空');
                    return
                }
                params.passWord = md5(params.passWord)
                let form = new FormData();
               form.append("userId",params.userId);
               form.append("passWord",params.passWord);
                // 接口中的不同部分
                   this.$http.post('/mobilelogin',form).then(res=>{
                   		console.log(res)
                       this.$toast(res.msg); //登陆成功或失败的提示信息
                       //判断是否请求成功
                       if(res.code == 0){
                       	this.$store.dispatch('changeUser',res.data.user);
                           //全局登陆标识
                        sessionStorage.setItem('token',res.data.token)
                        if(this.auto_login){
                            localStorage.setItem('auto_login',this.auto_login)
                            localStorage.setItem('username',this.username)
                            localStorage.setItem('password',this.password)
                        }else{
                            localStorage.removeItem('auto_login')
                        }
                        setTimeout(()=>{
                            this.$router.replace({
                                path:'/'
                            })
                        },500)
                       }
                  
                   })
            }
        },
        watch:{
            remember_pw(newVal){
                if(newVal){
                    localStorage.setItem('username',this.username);
                    localStorage.setItem('password',this.password)

                }else{
                    localStorage.removeItem('username');
                    localStorage.removeItem('password');
                }
                localStorage.setItem('remember_pw',newVal)
            }
        }
    }
</script>

<style scoped lang="less">
    @main-color:red;
    .login{
        .content{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 100px;
                margin: 50px 0 20px;
            }
            h2{
               font-size: 24px;
            }
        }
        form{
            width:300px;
            margin-top: 30px;
            i{
                color:white;
                font-size: 24px;
            }
            .form-list{
                display: flex;
                align-items: center;
                height: 40px;
                margin-bottom: 15px;
                border-radius: 5px;
                overflow: hidden;
                .label{
                    width: 40px;
                    height: 100%;
                    background: @main-color;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                input{
                    width: 260px;
                    height: 100%;
                    border: 1px solid #aaa;
                    border-left: 0;
                    box-sizing: border-box;
                    border-radius: 0 5px 5px 0;
                    padding-left: 10px;
                    font-size: 18px;
                }
            }
            button{
                height: 40px;
                background: @main-color;
                width: 100%;
                font-size: 20px;
                color:white;
            }
            .bottom{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 15px;
                color:#666;
                div{
                    display: flex;
                    align-items: center;
                }
            }
            /deep/.weui-label{
                width: 4.2em !important;
                font-size: 20px;
            }
        }
    }
</style>
